import React from 'react'
import { useSelector,useDispatch } from 'react-redux';
import { Toast, NavBar,SubmitBar ,Checkbox,ProductCard, Tag, Button   } from 'react-vant';
import widthRoute from '../../Utils/widthRoute';
import { STORETYPE,INPSHOP,ALLFLAGSHOP,PRVEBTN,NEXTBTN} from '../../Type/Store.d';

function Shop(route:any) {
    // route.route.Navigate / Params
    const ShopList = useSelector((state:STORETYPE)=>state.ShopList);
    const Dispatch = useDispatch();
    return (
        <div className='Shop'>
            <NavBar
                title="购物车"
                leftText="返回"
                rightText="按钮"
                onClickLeft={() => route.route.Navigate(-1)}
                onClickRight={() => Toast('按钮')}
            />
            <main>
                {
                    ShopList && ShopList.length>0 ? ShopList.map((item,index)=>{
                        return <ProductCard key={index}
                                    num={item.count}
                                    price={item.price}
                                    desc={item.con}
                                    title={item.txt}
                                    thumb={
                                        <>
                                            <Checkbox checked={item.inpFlag} onChange={(val) => {
                                                Dispatch({
                                                    type:INPSHOP,
                                                    payload:item.id
                                                })
                                            }} />
                                            <img src={item.src} alt="" />
                                        </>
                                    }
                                    footer={
                                        <>
                                        <Button size="mini" round plain style={{ marginRight: 2 ,padding:10}} onClick={()=>{
                                            Dispatch({
                                                type:PRVEBTN,
                                                payload:item.id
                                            })
                                        }}> - </Button>
                                        <Button size="mini" round plain style={{ padding:10 }} onClick={()=>{
                                            Dispatch({
                                                type:NEXTBTN,
                                                payload:item.id
                                            })
                                        }}> + </Button>
                                        </>
                                    }
                                />
                    }):'购物车暂无数据'
                }
            
            </main>
            <footer>
            {/* 10.正确实现购物车页面的计算总价 */}
            <SubmitBar
                price={useSelector((state:STORETYPE)=>state.SumPrice) * 100}
                buttonText="提交订单"
                tip={
                    <>
                    你的收货地址不支持同城送,
                    <span style={{ color: '#1989fa' }}>修改地址</span>
                    </>
                }
                >
                    {/* 9.正确实现购物车页面的全选反选功能 */}
                <Checkbox checked={useSelector((state:STORETYPE)=>state.AllFlag)} onChange={(e)=>{
                    Dispatch({
                        type:ALLFLAGSHOP,
                        payload:e
                    })
                }}>全选</Checkbox>
            </SubmitBar>
            </footer>
        </div>
    )
}

export default widthRoute(Shop)